<template>
<!-- 制作一个框架包裹slider -->
 <div style="height:100%">
      <!-- 配置slider组件 -->
      <slider ref="slider" :options="options" @slide='slide' @tap='onTap' @init='onInit'>
          <!-- 直接使用slideritem slot -->
           <slideritem v-for="(item,index) in someList" :key="index" :style="item.style">{{item.html}}</slideritem>
          <!-- 设置loading,可自定义 -->
          <div slot="loading">loading...</div>
      </slider>
 </div>
</template>
<script>
// import { slider, slideritem } from 'vue-concise-slider'// import slider components
export default {
   el: '#app',
   data () {
      return {
        //Image list
        someList:[],
        //Sliding configuration [obj]
        options: {
          currentPage: 0,  //初始化slider时为第几页
          thresholdDistance:300,  //触发滑动的距离阈值
          thresholdTime:100,  //触发滑动的时间阈值
          autoplay:false,  //自动播放的时间
          loop:false,  //是否循环滚动
          direction:'vertical',  //方向设置，默认为水平滚动('horizontal'),可设置为垂直滚动('vertical')
          loopedSlides:1,  //loop设置为true时,设置前后复制页面的数量
          slidesToScroll:1,  //每次滑动切换的页数
          timingFunction: 'ease',  //滑动方式
          speed: 300,  //滑动持续时间[ms]
          preventDocumentMove:true,  //阻止touch事件触发时，整个页面的滚动
        }
      }
    },
    components: {
      slider,
      slideritem
    },
    mounted () {
      let that = this;
      setTimeout(function () {
        that.someList = [
          {
            html: 'slide1',
            style: {
              'background': '#1bbc9b'
            }
          },
          {
            html: 'slide2',
            style: {
              'background': '#4bbfc3'
            }
          },
          {
            html: 'slide3',
            style: {
              'background': '#7baabe'
            }
          }
        ]
      }, 2000)
    },
    methods: {
      // Listener event
      slide (data) {
        console.log(data)
      },
      onTap (data) {
        console.log(data)
      },
      onInit (data) {
        console.log(data)
      }
    }
}
</script>